import AMapLoader from '@amap/amap-jsapi-loader'

import { reactive } from 'vue'

// 数据
const state = reactive({
  aMap: '',
  map: '',
  marker: '',
  infoWindow: ''
})

const initMap = (DomId) => {
  // 初始化地图
  AMapLoader.load({
    key: '076431f96472ad200d55e15df6fdbe3d',
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [],
    AMapUI: {
      version: '1.1',
      plugins: ['overlay/SimpleMarker', 'overlay/SimpleInfoWindow', 'control/BasicControl']
    }
  }).then((AMap) => {
    state.aMap = AMap
    state.map = new state.aMap.Map(DomId, {
      resizeEnable: true, // 是否监控地图容器尺寸变化
      center: [114.0295, 22.609875],
      viewMode: '3D', // 地图设置成 3D 模式，否则图层会失去高度信息
      zoom: 11,
      pinch: 45
    })

    // 自定义图标及图标位置
    setIconPosition()

    // 自定义窗体
    setBody()
    // 设置缩放控件
    setZoom()
    // marker 打开
    openInfoWin()

    // marker 点击时打开
    state.marker.on('click', function () {
      openInfoWin()
    })
  }).catch(e => {
    console.log(e)
  })
}

// marker 打开
function openInfoWin () {
  state.infoWindow.open(state.map, state.map.getCenter())
}

// 自定义图标及图标位置
function setIconPosition () {
  state.marker = new state.aMap.Marker({
    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
    // 自定义图标地址
    iconStyle: {
      style: {
        width: '25px'
      }
    },
    position: state.map.getCenter(),
    offset: new state.aMap.Pixel(-12, -40),
    zIndex: 60
  })
  state.marker.setMap(state.map)
}

// 自定义窗体
function setBody () {
  // 实例化信息窗体
  const content = []
  content.push('<div class="input-card content-window-card"><div><img style="float:left;" src=" https://webapi.amap.com/images/autonavi.png "/></div>')
  content.push('<div style="padding:7px 0px 0px 0px;"><h4>高德软件</h4>')
  content.push('<p class="input-item">电话 : 010-84107000   邮编 : 100102</p>')
  content.push('<p class="input-item">地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>')
  state.infoWindow = new state.aMap.InfoWindow({
    isCustom: false, // 是否使用自定义窗体
    content: content.join('')
  })
}

// 设置缩放控件/实时交通控件
function setZoom () {
  state.aMap.plugin(['AMap.ControlBar', 'AMap.ToolBar'], function () {
    // 添加 3D 罗盘控制
    state.map.addControl(new state.aMap.ControlBar({
      // 简易缩放模式，默认为 false
      position: 'RT'
    }))
    state.map.addControl(new state.aMap.ToolBar({
      // 简易缩放模式，默认为 false
      liteStyle: true
    }))
  })
}

// 卸载地图
const destroyMap = () => {
  state.map && state.map.destroy()
}

export { initMap, destroyMap }
